<!-- 个人中心 -->
<template>
	<view class="container">
		<view style="margin-top: 200rpx;display: flex;justify-content: center;">
      <image class="auto-login-img logo login-img" src="https://duomi.bigchun.com/images/logo.jpg"></image>
    </view>
		<view class="name">多米惠选欢迎您</view>

		<view style="display: flex;justify-content: center;align-items: center;">
			<view>
        <button class="denglu"  v-if="!protocol"  @click="clickagree()">微信用户一键登录</button>
        <button class="denglu"  v-else  @click="thirdLogin('wechat')">微信用户一键登录</button>
			</view>
		</view>
		<view class="title" @click="toLogin">选择手机号登录</view>
    <!-- 协议 -->
    <view class=" u-flex u-row-center agreement-box">
      <u-checkbox v-model="protocol" shape="circle" active-color="#FC5351">
        <view class="agreement-text u-flex u-col-center">
          选中登录代表您已同意
          <view class="tcp-text u-flex u-col-center">
            <view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: 0 } })">《用户服务协议》</view>
          </view>
        </view>
      </u-checkbox>
    </view>
    <u-popup closeable v-model="bindmobille"  v-if="bindmobille"  mode="center"  @close="close" @open="open" width="612rpx">
      <view class="notice-modal">
        <image class="auto-login-img login-img" src="https://duomi.bigchun.com/images/logo.jpg"></image>
        <text class="title">多米惠选欢迎您</text>
        <button class="seckill-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
      </view>
    </u-popup>
    <u-modal :value="isweishenhe" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'"
             :confirm-style="confirmStyle" :confirm-text="'我知道了'" :title="' '">
      <view class="slot-content">
        <view class="audit_img">
          <image class="audit_img_top" src="@/static/images/5c8352de0bcc21.png"></image>
        </view>
        <view class="audit_title">入驻信息审核中</view>
        <view class="audit_sub_title">请耐心等待工作人员审核</view>
      </view>
    </u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
  import wechat from '@/shopro/wechat/wechat';
	export default {
		components: {

		},
		data() {
			return {
        protocol:false,
        bindmobille:false,
        isweishenhe:false,
        tokens:'',
        confirmStyle: {
          'width': '69%',
          'margin': '40rpx auto',
          'background': '#D9D9D9 linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%)',
          'border-radius': '60rpx',
          'flex': 'inherit'
        },
			};
		},
		computed: {

		},
		onLoad() {
			// uni.login({
			//         success: (res) => {
			//             if (res.code) {         //微信登录成功 已拿到code
			//                conosole.log('11',code)
			//             } else {
			//                 console.log('登录失败！' + res.errMsg)
			//             }
			//         }
			//     })
		},
		methods: {
      ...mapActions(['getUserInfo', 'showAuthModal']),
      confirmAudit() {
        this.isweishenhe = false;
      },
      open() {
        // console.log('open');
      },
      close() {
        this.bindmobille = false
        // console.log('close');
      },
			toLogin() {
				uni.navigateTo({
					url: 'pages/index/loginTel'
				})
			},
      closeAuthModal() {
        this.$store.dispatch('showAuthModal');
      },
      clickagree(){
        this.$u.toast('请同意用户协议');
      },
      // 第三方登录
      async thirdLogin(provider) {
        if (!this.protocol) {
          this.$u.toast('请同意用户协议');
          return false;
        }
        const that = this;
        let token = await wechat.login();
        if (token) {
          if(!token.check_state){
            this.isweishenhe = true;
            return false
          }
          this.tokens = token.token;
          await this.$http_business('user.wxMiniProgramOauth_isbind',{
            token:token.token,
          }).then(res => {
            console.log(res)
            if (res.code === 1) {
              if(res.data.is_bind){
                that.getUserInfo(token);
                that.closeAuthModal()
                setTimeout(()=>{
                uni.navigateBack({
                  delta: 1
                });
                },800)
              }else{
                this.bindmobille = true;
              }
            }
          });

        }
      },
			getPhoneNumber(e) {
				console.log('11', e)
        let res = e.detail;
        if (res.errMsg === "getPhoneNumber:ok") {
          uni.showLoading({
            title: "登录中..."
          });
          this.$http_business('user.wxMiniProgramOauth_bind', {
            session_key:uni.getStorageSync("session_key"),
            encryptedData: res.encryptedData,
            openid:uni.getStorageSync('open_id'),
            iv:res.iv,
            user_type:"2",
			token:this.tokens,
          }).then(res => {
            uni.hideLoading()
            console.log(res)
            if(res.code==1){
              uni.showToast({
                title:'登录成功'
              })
              // this.$store.commit('isLogin',true)
              // this.$store.commit('userInfo',res.data.userinfo)
              // uni.setStorageSync('userInfo',res.data.userinfo)
              this.getUserInfo(res.data.userinfo);
              setTimeout(()=>{
                uni.navigateBack({})
              },1500)
            }else{
              uni.showToast({
                title:res.msg,
                icon:'none'
              })

            }
          });
        }
        return
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 98vh;
	}

	.logo {
		width: 88px;
		height: 88px;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
	}

	.name {
		font-size: 18px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 21px;
		margin-top: 34rpx;
		text-align: center;
	}

	.denglu {
		width: 344px;
		height: 44px;
		background: #FC5351;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		font-size: 16px;
		margin-top: 180rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 19px;
		margin-top: 40rpx;
		text-align: center;
	}
  .agreement-box {
    position: fixed;
    bottom: 70rpx;
    width: 100%;
    margin: 80rpx auto 0;

    .protocol-check {
      transform: scale(0.7);
    }

    .agreement-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;

      .tcp-text {
        color: #32b9ee;
      }
    }
  }
  .notice-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 612 rpx;
    min-height: 658 rpx;
    background: #ffffff;
    padding: 30 rpx;
    border-radius: 20 rpx;
    .seckill-btn{
      width: 98%;
      line-height: 70rpx;
      color: #fff;
      background-color: #f56c6c;
      border-color: #f56c6c;
      font-size: 28rpx;
      font-weight: 500;
      border-radius: 10rpx;
      padding: 0;
      margin-bottom: 30rpx;
      margin-top: 50rpx;
    }
    .auto-login-img {
      width: 120rpx;
      height: 120rpx;
      margin: 92rpx 30rpx 30rpx;
    }
  }
  .slot-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .audit_img {
      width: 160rpx;
      height: 160rpx;

      .audit_img_top {
        width: 100%;
        height: 100%;
      }
    }

    .audit_title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      line-height: 48rpx;
      margin: 20rpx auto 20rpx;
    }

    .audit_sub_title {
      font-size: 32rpx;
      font-weight: 500;
      color: #999999;
      line-height: 48rpx;
      margin: 10rpx auto 10rpx;
    }
  }
</style>
